<!DOCTYPE html>
<html lang="en" style="height: 100%">
<head>
    <meta charset="UTF-8">
    <title>手机端登录页面</title>
    <style>
        *{
            font-size: 2rem;
        }
        input{
            text-align: center;
        }
    </style>
    <script src="http://47.106.66.89:8080/js/vue.min.js"></script>
    <script src="http://47.106.66.89:8080/js/axios.min.js"></script>
    <link  href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
    <script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
</head>
<body style="height: 100%; margin: 10%">
<h1 style="font-size: 3rem; margin-bottom: 2rem">
    大麦商城手机APP
</h1>
<form action="" style="display: grid; grid-template-columns: 30% 70%; grid-gap: 10px;
    height: 30%">
    <label>账号</label><input v-model="user.name">
    <label>密码</label><input v-model="user.pwd" type="password">
    <button style="grid-column: 2" @click.prevent="login">登录</button>
</form>

<script>
    var v = new Vue({
        el : "form",
        data : {
            user: {name:"", pwd:""}
        },
        created() {},
        methods : {
            login(){
                let p = new URLSearchParams();
                p.append("name",this.user.name)
                p.append("pwd",this.user.pwd)
                axios.post("/damai-user/user/login",p).then(res=>{
                    alert(res.data.msg);
                    if(res.data.code){
                        // 使用cookie保存用户名密码  不安全的做法
                        document.cookie = "name=" + this.user.name + "; Max-Age=" + (60 * 60 * 24 * 7);
                        document.cookie = "pwd=" + this.user.pwd + "; Max-Age=" + (60 * 60 * 24 * 7);
                        // 思考题: 关闭浏览器, cookie即失效, 如果设值cookie的有效期为 一周
                        location.href = "auth.html"
                    }
                })
            }
        }
    })
</script>

</body>
</html>